<template lang="html">
    <div class="">
        <el-row :gutter="10">
            <el-col :span="4">
                <div class="">
                    <el-input
                        placeholder="请输入姓名"
                        suffix-icon="el-icon-search"
                        v-model="formSearch.username"
                        size="small">
                    </el-input>
                </div>
            </el-col>
            <el-col :span="17">
                <div class="">
                    <el-date-picker
                        v-model="formSearch.betweenTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        size="small"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span="3">
                <el-button icon="el-icon-search" @click="queryAttendanceByUsername" circle></el-button>
            </el-col>
        </el-row>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            class="dataTable"
            >
            <el-table-column
                prop="username"
                label="姓名"
                align="center">
            </el-table-column>
            <el-table-column
                label="打卡日期"
                sortable
                align="center">
                <template slot-scope="scope">
                        <span v-if="scope.row.createTime != null">{{$moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>    
                        <span v-else>{{'--'}}</span>   
                </template>
            </el-table-column>
                <el-table-column
                    label="补卡原因"
                    align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.closedInfo != null">{{scope.row.closedInfo}}</div>
                        <div v-else>{{'--'}}</div>
                    </template>
                </el-table-column>                                                                               
                <el-table-column
                    label="工作时间"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.startTime != null">{{$moment(scope.row.startTime).format('HH:mm:ss')}} -- </span>                       
                        <span v-if="scope.row.endTime != null">{{$moment(scope.row.endTime).format('HH:mm:ss')}}</span>  
                        <span v-else>{{'--'}}</span>                        
                    </template>
                </el-table-column>
                <el-table-column
                    label="工作时长"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.workTime != null">{{scope.row.workTime}}</span>
                        <span v-else>{{'--'}}</span>                          
                    </template>
                </el-table-column>                
                <el-table-column
                    label="打卡类型"
                    align="center">
                    <template slot-scope="scope">
                        <div :style="{color:scope.row.attendanceType == '2'| scope.row.attendanceType == '4'?'green':'red' }">{{scope.row.attendanceType | dataFormat(attendanceTypeArray)}}</div>
                    </template>                    
                </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                fixed="right">
                <div slot-scope="scope">
                    <el-button-group>
                        <el-button
                            icon="el-icon-more"
                            size="small"
                            @click="openDisplayInfo(scope.row)">
                        </el-button>
                    </el-button-group>
                </div>
            </el-table-column>
        </el-table>
        <div class="block_pagination">
        <!--prev表示上一页，next为下一页，pager表示页码列表,total表示总条目数，size用于设置每页显示的页码数量。-->
            <el-pagination
                background
                layout="total,prev,sizes, pager, next,jumper"
                :total="total"
                :page-sizes="[5, 10, 15, 20]"
                :page-size.sync="formSearch.pageSize"
                :current-page.sync="formSearch.pageNum"
                @current-change="getPage"
                @size-change="getPage"
                style="float: right">
            </el-pagination>
        </div>
        <el-dialog
            :title="userAttendanceName + ' 出勤详情'"
            :visible.sync="displayDialogVisible"
            width="50%"
            :before-close="displayHandleClose">
            <el-table
                :data="queryTableData"
                stripe
                style="width: 100%"
                class="dataTable"
                >
                <el-table-column
                    prop="username"
                    label="姓名"
                    align="center">
                </el-table-column>
                <el-table-column
                    label="打卡日期"
                    sortable
                    align="center">
                    <template slot-scope="scope">
                            <span v-if="scope.row.createTime != null">{{$moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>    
                            <span v-else>{{'--'}}</span>   
                    </template>
                </el-table-column>
                <el-table-column
                    label="补卡原因"
                    align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.closedInfo != null">{{scope.row.closedInfo}}</div>
                        <div v-else>{{'--'}}</div>
                    </template>
                </el-table-column>                                                                               
                <el-table-column
                    label="工作时间"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.startTime != null">{{$moment(scope.row.startTime).format('HH:mm:ss')}} -- </span>                       
                        <span v-if="scope.row.endTime != null">{{$moment(scope.row.endTime).format('HH:mm:ss')}}</span>  
                        <span v-else>{{'--'}}</span>                        
                    </template>
                </el-table-column>
                <el-table-column
                    label="工作时长"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.workTime != null">{{scope.row.workTime}}</span>
                        <span v-else>{{'--'}}</span>                          
                    </template>
                </el-table-column>                
                <el-table-column
                    label="打卡类型"
                    align="center">
                    <template slot-scope="scope">
                        <div :style="{color:scope.row.attendanceType == '2'| scope.row.attendanceType == '4'?'green':'red' }">{{scope.row.attendanceType | dataFormat(attendanceTypeArray)}}</div>
                    </template>                    
                </el-table-column>
            </el-table>
            <div class="block_pagination">
            <!--prev表示上一页，next为下一页，pager表示页码列表,total表示总条目数，size用于设置每页显示的页码数量。-->
                <el-pagination
                    background
                    layout="total,prev,sizes, pager, next,jumper"
                    :total="queryTotal"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size.sync="queryFormSearch.pageSize"
                    :current-page.sync="queryFormSearch.pageNum"
                    @current-change="getPage"
                    @size-change="getPage"
                    style="float: right">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import department from '../../../api/department'
export default {
    data() {
        return {
            //编辑对话框的展示与退出
            editDialogVisible: false,
            //出勤详情的名字
            userAttendanceName: '',
            //个人出勤详情对话框
            displayDialogVisible: false,
            //打卡时间初始值
            patchTime: ["08:00","08:00"],
            //日历选择器的快捷选项
            pickerOptions: {
                shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                text: '最近一个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                text: '最近三个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                }
                }]
            },
            //个人出勤详情的数据
            displayTableData: [],
            //模拟表格数据
            tableData: [],
            total:0,
            formSearch:{
                pageNum:1,
                pageSize:10,
                username:'',
                betweenTime:''
            },
            //查看个人出勤详情
            queryTableData: [],
            queryTotal:0,
            queryFormSearch:{
                pageNum:1,
                pageSize:10,
                username:'',
                betweenTime:''
            },            
            //请假类型
            attendanceTypeArray: [
                {value:1,name:'未打卡'},
                {value:2,name:'正常'},
                {value:3,name:'异常迟到'},
                {value:4,name:'请假'},                
            ],            

        }
    },
    created(){
        this.getPage()
    },
    filters:{
        //类型过滤
        dataFormat(value,list){
            return value || value == '1' ? list.filter( (item) => item.value == value)[0].name:""
        }
    },     
    methods: {

        async getPage(){
            const res = await department.queryAllDeptAttendance(this.formSearch);
            if(res.data.code=== '000'){
                this.tableData=res.data.data.records;
                this.total=res.data.data.total;
            }
        },
        async queryAttendanceByUsername(){
            const res = await department.queryAllDeptAttendance(this.formSearch);
            if(res.data.code=== '000'){
                this.tableData=res.data.data.records;
                this.total=res.data.data.total;
            }
        },
        //展示个人的出勤详情
        async openDisplayInfo(item) {
            this.userAttendanceName = item.username;
            this.formSearch.username = item.username
                const res = await department.queryAllDeptAttendance(this.formSearch);
                if(res.data.code=== '000'){
                    this.queryTableData=res.data.data.records;
                    this.queryTotal=res.data.data.total;
                }           
            this.displayDialogVisible = true;
        },
        //关闭个人出勤详情页面
        displayHandleClose() {
            this.userAttendanceName = '';
            this.formSearch.username = ''
            this.displayDialogVisible = false;
        },
    }
}
</script>

<style lang="css">
.dataTable {
    margin: 40px auto;
}
.red {
    color: red;
}
.blue {
    color: #409EFF;
}
.statusEdit {
    padding-bottom: 20px;
}
.changeStatus {
    width: 350px;
}
.editStatusDistance {
    padding-top: 7px;
}
.displayTable {
    margin-bottom: 40px;
}
</style>